<template>
	<!-- shoplist本地团购 -->
	<view class="g_wp">
		<view class="g_nav">
			<view class="p_logo">
				<image src="../../static/logo.png" mode=""></image>
				<text>多米街本地团购</text>
			</view>
			<view class="nav_bar">
				<view class="serch">
					<input type="text" v-model="keywords" @confirm="searchTap" placeholder="搜索团购商品" />
					<text class="iconfont icon-sousuo"></text>
				</view>
				<!-- <view class="cart" @click="$navTo('../cart/cart')">
					<text class="iconfont icon-gouwuche"></text>
					<text class="badge" v-if="mycart" :style="badgeStyle">{{mycart}}</text>
				</view> -->
				<view class="order">
					<image style="width: 40upx;height: 40upx;" @click="navOrder" src="../../static/dingdan.png" mode=""></image>
					<view style="font-size: 20rpx;">订单</view>
				</view>
			</view>
			<scroll-view class="nav_menu" scroll-x>
				<text :class="{active:menuIdx===0}" @click="menuTap(0,1)">全部</text>
				<text :class="{active:menuIdx===item.id}" v-for="item in classList" :key="item.id"
					@click="menuTap(item.id,1)">{{item.name}}</text>
			</scroll-view>
			<!-- <view class="nav_menu2">
				<view class="item" :class="{active:menuIdx2===2}" @click="menuTap(2,2)">
					<text>销量优先</text>
					<text class="iconfont icon-sanjiaoxia"></text>
				</view>
				<view class="item" :class="{active:menuIdx2===1}" @click="menuTap(1,2)">
					<text>折扣优先</text>
					<text class="iconfont icon-sanjiaoxia"></text>
				</view>
				<view class="item" :class="{active:menuIdx2===0}" @click="menuTap(0,2)">
					<text>距离优先</text>
					<text class="iconfont icon-sanjiaoxia"></text>
				</view>
			</view> -->
		</view>
		<view class="g_body">
			<view class="g_list">
				<view class="list_item" v-for="item in list" @click="$navTo('/pages/product/groupbuy?id='+item.id)"
					:key="item.id">
					<image :src="item.thumb" mode=""></image>
					<text v-if="item.shareprice" style="position: absolute;background-color: rgba(0,0,0,0.5);border-radius: 6upx;padding:2upx 6upx;color: #fff;font-size: 24upx;bottom: 226upx;right: 10upx;">{{item.shareprice}}</text>
					<text class="list_title clamp">{{item.title}}</text>
					<view class="l_cart">
						<text class="money">{{item.saleprice}}</text>

						<text class="old_money">￥{{item.productprice}}</text>
					</view>
					<view class="l_hot">
						<text class="label"><text v-text="item.mark+' 热销中'"></text></text>
						<text style="color: #666;">已售{{item.sales}}</text>
					</view>
					<view class="l_member">
						<image :src="item.supplier.logo" mode=""></image>
						<text>{{item.supplier.supname}}</text>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-show="isloading" src="../../static/business/loading.gif" mode=""></image>
				<text v-show="isempty">没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				badgeStyle: '',
				keywords: '',
				mycart: '',
				menuIdx: 0,
				menuIdx2: 0,
				classList: [],
				page: 0,
				list: [],
				issearch: false,
				isempty: false,
				isloading: false
			}
		},
		watch: {
			text() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			}
		},
		onReachBottom() {
			this.getList();
		},
		onShow() {
			this.getClass();
			this.searchTap();
		},
		methods: {
			getClass() {
				this.$axios('groupgoods/cate', 'POST', 'shop').then(res => {
					if (res.data.code == 200) {
						this.classList = res.data.data;
					}
				})
			},
			getList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('groupgoods/goodsList', 'POST', 'shop', {
					keyword: this.keywords,
					cate: this.menuIdx,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			},
			menuTap(v, type) {
				switch (type) {
					case 1:
						if (v === this.menuIdx) return;
						this.menuIdx = v;
						break;
					case 2:
						if (v === this.menuIdx2) return;
						this.menuIdx2 = v;
						break;
				}
				this.searchTap();
			},
			navOrder() {
				uni.setStorageSync('upOrderType',2);
				this.$navTo('/pages/index/order');
			},
			searchTap() {
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script> 

<style lang="scss">
	@import '/store/icon.css';
	$bage-size: 12px;
	$bage-small: scale(0.7);
	$bage-height: 20px;

	page {
		background-color: #f2f2f2;
		font-size: $font-base;
	}

	.g_nav {
		background: $base-color;
		color: #fff;
		position: fixed;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 30upx);
		width: 100%;
		z-index: 200;

		.p_logo {
			display: flex;
			align-items: center;
			font-size: 34upx;

			image {
				height: 74upx;
				width: 74upx;
				margin: 0 20upx;
			}
		}

		.nav_bar {
			display: flex;
			align-items: center;
			padding: 10upx 20upx 6upx;

			.serch {
				background: #fff;
				border-radius: 40px;
				color: #303133;
				flex: 1;
				padding: 0 50upx 0 50upx;
				position: relative;
				margin-right: 20rpx;

				input {
					height: 60upx;
				}

				.icon-sousuo {
					color: $font-color-dark;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 8upx;
				}
			}

			.cart {
				margin: 0 20upx;
				position: relative;

				.icon-gouwuche {
					font-size: 60upx;
				}

				.badge {
					/* #ifndef APP-PLUS */
					display: flex;
					/* #endif */
					justify-content: center;
					flex-direction: row;
					height: $bage-height;
					line-height: $bage-height;
					border-radius: 100px;
					background: #8405dc;
					text-align: center;
					font-family: 'Helvetica Neue', Helvetica, sans-serif;
					font-size: $bage-size;
					padding: 0px 6px;
					transform: $bage-small;
					position: absolute;
					top: -6upx;
					right: -12upx;
				}
			}

			.order {
				image {
					height: 60upx;
					width: 60upx;
				}
			}
		}
	}

	.nav_menu {
		background-color: #f2f2f2;
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		color: #303133;
		white-space: nowrap;
		width: 100%;
		font-size: 34upx;

		text {
			display: inline-block;
			line-height: 80upx;
			position: relative;
			padding: 0 20upx;
		}

		.active {
			font-weight: bold;
		}

		.active::after {
			border-bottom: 4px $bg-color solid;
			content: '';
			position: absolute;
			bottom: 6upx;
			left: 50%;
			transform: translateX(-50%);
			width: 50upx;
		}
	}

	.nav_menu2 {
		background: #f2f2f2;
		color: #303133;

		.item {
			display: inline-block;
			line-height: 70upx;
			text-align: center;
			width: calc(100% / 3);
			font-weight: bold;

			.icon-sanjiaoxia {
				color: #C0C4CC;
				font-size: 24upx;
			}
		}

		.active {
			color: $bg-color;

			.icon-sanjiaoxia {
				color: $bg-color;
			}
		}
	}

	.g_body {
		padding: 330upx 10upx 100upx;

		.g_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.list_item {
				background: #fff;
				border-radius: 20upx;
				box-sizing: border-box;
				margin: 0 10upx 20upx;
				padding-bottom: 20upx;
				position: relative;
				width: calc(50% - 20upx);


				image {
					border-radius: 10upx;
					height: calc(50vw - 30upx);
					width: 100%;
				}

				.list_title {
					font-weight: bold;
					overflow: hidden;
					line-height: 45upx;
					padding: 0 10upx;
					white-space: nowrap;

				}

				.l_cart {
					display: flex;
					align-items: center;
					padding: 0 10upx;

					.money {
						color: $bg-color;
						font-size: 34upx;
						font-weight: bold;
						margin-right: 10upx;

						&:before {
							content: '￥';
							font-size: 24upx;
						}
					}

					.old_money {
						font-size: 28upx;
						text-decoration: line-through;
					}
				}

				.l_hot {
					color: #750CD5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24upx;
					padding: 10upx;

					.label {
						background: rgba(117, 12, 213, 0.1);
						padding: 0rpx 4rpx;
						border-radius: 6rpx;
						text{
							margin: 0 5upx;
						}
					}
				}

				.l_member {
					font-size: 24upx;
					padding: 0 10upx;

					image {
						border-radius: 50%;
						height: 50upx;
						width: 50upx;
						margin-right: 10upx;
						vertical-align: bottom;
					}

					text {
						display: inline-block;
						line-height: 50upx;
					}
				}
			}
		}
	}

	.empty_loading {
		padding-top: 20upx;
		text-align: center;
		color: #0066CC;
	}

	.empty_loading image {
		height: 60upx;
		width: 60upx;
	}
</style>